<template>
  <div class="page">
    <div>我是echarts模板页面</div>
    <div ref="myChart" id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const myChart = ref<HTMLElement>();
const myCharts = ref<any>();

const renderChart = () => {
  // 绘制图表
  myCharts.value = echarts.init(myChart.value!);
  myCharts.value.setOption({
    title: { text: '降水量' },
    tooltip: {},
    xAxis: {
      data: ['6-3', '6-4', '6-5', '6-6', '6-7', '6-8'],
    },
    yAxis: {},
    series: [
      {
        name: '降水量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20],
      }
    ]
  });
}

onMounted(() => {
  renderChart();
});

</script>
<style lang="scss" scoped>
</style>
